<template>
    <div class="bg">
        <div v-if="admin.isLogin">
            <login></login>
        </div>
        <div v-else :class="routertype === MENUTYPE.目录 ? 'basePages' : ''">
            <NavBar :style="{ height: showNav ? 'var(--van-nav-bar-height)' : 0 }" class="animate-nav" :title="navbar"
                :right-text="showScrolltoTop ? '返回顶部' : ''" :left-text="routertype >= MENUTYPE.菜单 ? '返回' : ''"
                :border="false" :left-arrow="routertype >= MENUTYPE.菜单" :fixed="true" @click-left="onClickLeft"
                @click-right="onClickRight">
            </NavBar>
            <div class="scroll" id="scroll" @scroll="scroll" ref="scrollRef">
                <div class="nav-plase"></div>
                <router-view></router-view>
            </div>
            <div style="height: 50px;"></div>
            <bottom_tabbar :options="head" :activeIndex="headActive"></bottom_tabbar>
        </div>
    </div>
</template>

<script lang="ts" setup>
import bottom_tabbar from "@m/components/App/bottom_tabbar.vue";
import { computed, ref, watch } from 'vue';
import { NavBar } from "vant";
import { useRoute, useRouter, type RouteLocationNormalizedLoadedGeneric } from "vue-router";
import { navBarStore, pagebuttonStore, adminStore, headStore, isDarkStore } from "@b/store";
import login from "@b/srcm/views/_login.vue";
import { MENUTYPE } from "@b/model/enum";

const route = useRoute()
const router = useRouter();
const snavBarStore = navBarStore()
const spagebuttonStore = pagebuttonStore()
const sheadStore = headStore()
const navbar = computed(() => snavBarStore.navbar)
const navBackground = computed(() => snavBarStore.background)
const navColor = computed(() => snavBarStore.color)

const headActive = computed(() => spagebuttonStore.headActive);//当前头部导航
const head = computed(() => sheadStore.options)//当前头部列表
const routertype = computed(() => spagebuttonStore.menuSelf?.type || 0)
const showNav = ref(true)
const showScrolltoTop = ref(false)
const scrollRef = ref()
const spagebutton = pagebuttonStore()//权限列表
const admin = adminStore()
const notOnce = ref(sessionStorage.getItem('notOnce'));
isDarkStore()

let lastScrollTop = 0

const handleNavigation = async (path: string) => {
    const res = await spagebutton.setRelationship(path);
    if (!res) {
        router.replace('403');
        return false;
    }
    snavBarStore.setNavBar(res);
    return true;
};

const handleFirstVisit = async () => {
    const res = await admin.setuserInfo();
    if (notOnce.value) return;
    sessionStorage.setItem('notOnce', '1');
    notOnce.value = '1';
    if (res) {
        const { pageIndex } = res;
        if (pageIndex && pageIndex !== '/') {
            await handleNavigation(pageIndex);
            router.push(spagebutton.headActiveRouter).then(async () => {
                router.push(pageIndex);
            });
        } else {
            router.push('/_account');
        }
    }
};
handleFirstVisit()

watch(() => admin.isLogin, async (val) => {
    if (val) return;
    await sheadStore.getMemu('recache')
    getAside(route)
})
const getAside = async (val: RouteLocationNormalizedLoadedGeneric) => {
    const res = await spagebuttonStore.setRelationship(val.path);
    if (!res) router.replace("/403")
    await sheadStore.getAsideByPage(headActive.value, val.fullPath);
}
const promise = sheadStore.getMemu('recache')
router.beforeEach(async (val) => {
    if (!notOnce.value) return;
    const notCheck = ['/', '/403', '/404'];
    if (notCheck.includes(val.path) || admin.isLogin) return;
    const navigationAllowed = await handleNavigation(val.path);
    if (!navigationAllowed) return false;
    await promise
    getAside(val)
})
watch(headActive, async (val) => {
    await sheadStore.getAsideByHead(val)
})
const scroll = (event: Event | { target: HTMLElement }) => {
    const scrollTop = (event.target as HTMLElement)?.scrollTop
    const isDown = scrollTop > lastScrollTop
    lastScrollTop = scrollTop
    if (isDown && showNav.value) {
        showNav.value = false
    }
    else if (!isDown && !showNav.value) {
        showNav.value = true
    }
    if (!showNav.value) return
    if (scrollTop > screen.height) showScrolltoTop.value = true
    else showScrolltoTop.value = false
}
const onClickLeft = () => {
    router.back()
}
const onClickRight = () => {
    scrollRef.value.scrollTop = 0
}
</script>

<style scoped>
.scroll {
    height: var(--bg-height);
    overflow: auto;
    scroll-behavior: smooth;
}

.basePages {
    --bg-height: calc(100vh - 50px)
}

.animate-nav {
    overflow: hidden;
    --van-nav-bar-background: v-bind(navBackground);
    --van-nav-bar-title-text-color: v-bind(navColor);
    transition: all .5s;
    z-index: 999;
}

.nav-plase {
    background-color: v-bind(navBackground);
    height: var(--van-nav-bar-height);
}


.drawer-bottom {
    display: flex;
    align-items: center
}

.drawer-bottom .van-input {
    width: 200px;
    margin-right: 12px
}

.van-empty {
    padding: 0
}

.procure-id+.procure-id::before {
    content: ' ,'
}
</style>